<template>
	<view class="app-content">
		<!-- 导航 -->
		<view>
			<u-navbar :title="title" :leftIconSize="0" v-if="!loading" :fixed="true" :placeholder="true">
				<view slot="left">
					<view class="u-nav-slot" v-if="daohang.list.length<=0">
						<u-icon @click="tofanhui()" name="arrow-left" size="19" ></u-icon>
						<u-line direction="column" :hairline="false" length="16" margin="0 8px" ></u-line>
						<u-icon @click="toindex()" name="home" size="20" ></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="xiangqing" v-if="dataList.length>0">
			<u-swipe-action>
		        <u-swipe-action-item
		          :options="callbtn" v-for="item,index in dataList" :key="index" :name="index"  @click="cellbtnclick" 
		        >
		        
					<view class=""  @longpress="longpress(item,index)" @click="click(item,index)" @touchend="touchend()">
						<u-cell :isLink="false" :clickable="true">
							<view slot="icon" class="itemPhoto">
								<view :class="item.onLine?'':'userOffLine'">									
									<u--image :src="item.chatuser.photo" :fade="false"  mode="widthFix" lazyLoad width="80rpx" height="80rpx">
									  <template v-slot:loading>
										<u-loading-icon></u-loading-icon>
									  </template>
									  <view slot="error" style="line-height:100%;font-size: 24rpx;">加载失败</view>
									</u--image>
								</view>
								<view class="readNum">
									<u-badge :value="item.read" max="99" ></u-badge>
								</view>
							</view>
							<view class="info_title" slot="title">
								<view class="info_name u-line-1">
									{{item.chatuser.nickName}}
								</view>
								<view  class="info_time">
									{{item.time}}
								</view>
							</view>
							<view class="info_label u-line-1"  slot="label">
								{{item.subtext}}
							</view>
							<view slot="value">
								
							</view>
						</u-cell>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<view v-if="dataList.length<=0">
			<view class="pingbixs">
				<u-empty mode="data" :icon="config.iconArray.message" text="还没有收到消息" >
				</u-empty>
			</view>
		</view>
		<u-action-sheet :actions="czlist"  cancelText="取消" :show="czshow" :closeOnClickOverlay="true" :closeOnClickAction="true" @close="czshow=false;" @select="czselect"></u-action-sheet>
		<view class="" style="z-index: 11;">
			<u-tabbar v-if="daohang.list.length>0" :zIndex="999" :value="daohang.naviKey" :activeColor="daohang.navi_set.active_color" :inactiveColor="daohang.navi_set.inactive_color">
				<u-tabbar-item v-for="(item,index) in daohang.list" :badge="item.badge" :key="index" :text="item.text" :icon="daohang.naviKey==index?item.selectedIconPath:item.iconPath" @click="tabClick(item,index)" ></u-tabbar-item>
			</u-tabbar>
		</view>
		<u-no-network @disconnected="disconnected" ></u-no-network>
		<u-toast ref="uToast" />
		<view class="km_loading" v-if="loading">
			<image src="@/static/loading_3.gif" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		wappConfig
	} from "@/api/api.js";
	import {
		chatApi
	} from "@/api";
	import {
		getuserinfo,chatlist,upchatlist
	} from "@/api/user.js";
	import { toLogin } from '@/libs/login';
	export default {
		data() {
			return {
				title: '消息',
				loading:true,
				config:{
					iconArray:{
						message:""
					}
				},
				pagePath:'/pages/info/index',
				daohang:{
					list:[],
					naviKey:0,
					navi_set:{
						active_color: "#34C083",
						height: 100,
						inactive_color: "#757575",
					}
				},
				user:{},
				callbtn:[
					// {
					// 	icon: 'account-fill',
					// 	key:"gohome",
					// 	style: {
					// 		backgroundColor: '#3c9cff',
					// 		width: '40px',
					// 		height: '40px',
					// 		borderRadius: '100px',
					// 		margin: '0 6px'
					// 	}
					// },
					{
						icon: 'trash-fill',
						key:"del",
						style: {
							backgroundColor: '#f56c6c',
							width: '40px',
							height: '40px',
							borderRadius: '100px',
							margin: '0 6px'
						}
					},
				],
				islongPress:false,
				dataList:[
				],
				czshow:false,
				czlist:[
					// {
					// 	name:'查看主页',
					// 	key:'gohome'
					// },
					{
						name: '删除',
						key:"del",
						color:'#f56c6c',
					}
				],
				czitem:{
					item:{},
					i:""
				},
				pages:{}
			}
		},
		components: {
		},
		onLoad() {
		},
		onShow() {
			this.getconfig();
			this.getuser();
		},
		mounted() {
			let t=this;
			t.$socket.on('naviList', (res) => {
				console.log(res)
				t.daohang.list=res.data;
			})
		},
		methods: {
			upDataFun(dt){
				let rt={
					msg:"无参数",
					code:404,
					data:dt
				}
				return new Promise((reslove, reject) => {						
					if(!dt){
						reject(rt);
						return false;
					}
					chatApi("upChatList",dt).then(res=>{
						reslove(res)
					})
					.catch(error=>{
						rt.code=500;
						rt.error=error;
						rt.msg="请求失败";
						reject(rt);
						console.error(error)
					})
				})
			},
			getchatlist(pno){
				let that=this,list=this.dataList;
				if(!pno){
					pno=1;
					list=[];
				}
				let dt={
					pages:{
						pno:pno
					},
					chattype:1,
				}
				chatApi("chatList",dt).then(res=>{
					console.log(res)
					for(let p of res.data.list){
						list.push(p);
					}
					that.dataList=list;
					that.pages=res.data.pages;
					that.loading=false;
				})
				.catch(res => {
					console.log(res)
					uni.showModal({
						content:res.msg?res.msg:res?res:"获取配置文件失败",
						title:"提示",
						showCancel:false
					})
					that.loading=false;
				});
			},
			czselect(e){
				console.log(e)
				if(e.key=='del'){
					// this.dataList.splice(this.czitem.i,1);
					this.delfun(this.czitem.item);
				}
				if(e.key=='gohome'){
					this.tourl(this.czitem.item.chatuser.path);
				}
			},
			delfun(item){
				console.log(item);
				let t=this;
				let dt={
					id:item.id,
				}
				dt[item.isdeltype]=this.user.uid;
				console.log(dt)
				t.upDataFun(dt).then(res=>{
					t.dataList.splice(t.dataList.indexOf(item),1);
				});
			},
			longpress(item,i){
				console.log("长按事件1");
				this.islongPress = true;
				this.czshow=true;
				this.czitem.item=item;
				this.czitem.i=i;
				// console.log(item,i)
			},
			click(item,i){
				if(this.islongPress == false){
					console.log("不是长按事件");
					this.tourl(item.path);
				}else if(this.islongPress == true){
					console.log(item,i)
					// this.dataList.splice(i,1);
					console.log("长按事件2");
				}
			},
			touchend(){
				//延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
				setTimeout(() => {
					this.islongPress = false
				}, 200)
			},
			cellbtnclick(e){
				console.log(e)
				let btn=this.callbtn[e.index];
				let item=this.dataList[e.name]
				if(btn.key=='del'){
					// this.dataList.splice(e.name,1);
					this.delfun(item)
					// console.log(item)
				}
				if(btn.key=='gohome'){
					this.tourl(item.chatuser.path);
				}
				
			},
			upshuju(dt){
				let that=this;
				upchatlist(JSON.stringify(dt)).then(res=>{
					console.log(res)
				})
				.catch(res => {
					console.log(res)
					uni.showModal({
						content:res.msg?res.msg:res?res:"获取配置文件失败",
						title:"提示",
						showCancel:false
					})
					that.loading=false;
				});
			},
			retry(){
				this.getconfig();
			},
			tourl(e){
				console.log(e)
				if(!e){
					return true;
				}
				if(e==this.pagePath){
					return true;
				}
				uni.navigateTo({
					url:e,
					fail(error) {
						console.log(error)
						uni.showToast({
							title:"跳转出错",
							icon:"none"
						})
					}
				})
			},
			tofanhui(){
				console.log(1)
				uni.navigateBack({
					delta: 1,
					fail(){
						 uni.reLaunch({
							 url: '/pages/index/index'
						 });
					}
				})
			},
			toindex(){
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			// 切换导航
			tabClick(e,i){
				if(this.daohang.naviKey!=i){
					uni.reLaunch({
						url:e.pagePath,
						fail(err) {
							uni.showModal({
								content:err.errMsg,
								title:"错误提示",
								showCancel:false,
								fail(r) {
									console.log(r)
								}
							})
							console.log(err)
						}
					})
				}
				
			},
			getconfig(){
				let that=this;
				wappConfig({pagePath:that.pagePath}).then(e=>{
					console.log(e)
					that.daohang=e.data.naviList;
					that.config=e.data;					
				})
				.catch(res => {
					console.log(res)
					uni.showModal({
						content:res.msg?res.msg:res?res:"获取配置文件失败",
						title:"提示",
						showCancel:false
					})
					that.loading=false;
				});
			},
			getuser(){
				if(this.$store.getters.isLogin){
					console.log(this.$store.getters.userInfo)
					this.user=this.$store.getters.userInfo;
					this.getchatlist();
				}else{
					this.loading=false;
					uni.showModal({
						title:"提示",
						content:"需要登录才能使用完整的功能",
						confirmText:"登录",
						success(res) {
							if(res.confirm){
								toLogin()
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.pingbixs{
		margin-top: 30%;
		text-align: center;
	}
	.info_title{
		width: 100%;
		display: flex;
		.info_name{
			font-size: 30rpx;
			color: #333;
			line-height: 50rpx;
			margin-left: 20rpx;
			width: calc(100% - 130rpx);;
		}
	}
	.info_label{
		line-height: 50rpx;
		font-size: 26rpx;
		color: #999;
		margin-left: 20rpx;
	}
	.info_time{
		color: #999;
		font-size: 24rpx;
		float:right;
		line-height: 50rpx;
		width: 120rpx;
		text-align: right;
	}
	.itemPhoto{
		position: relative;
		.readNum{
			position: absolute;
			right: -20rpx;
			top: -20rpx;
		}
	}
</style>
